<template>
  <div>
    <div class="fillRefundInfo">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">填写售后信息</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i class="mint-toast-icon mintui mintui-search"></i>
            </label>
          </button>
        </div>
      </header>
      <div class="refund-info">
        <p>
          <span>货品情况</span>
          <span class="right" @click="show0"><input v-model="value0" readonly></input>
            <i class="more-right"></i>
          </span>
        </p>
        <p>
          <span>退款原因</span>
          <span class="right" @click="show1"><input v-model="value1" readonly></input>
            <i class="more-right"></i>
          </span>
        </p>
        <p>
          <span>退款金额</span>
          <span class="right bgc">￥{{returnPrice|formatMoney}}</span>
        </p>
        <p>
          <span>退款运费</span>
          <span class="right bgc">￥{{returnFreight|formatMoney}}</span>
        </p>
      </div>
      <div class="explain">
        <textarea placeholder="请输入售后说明" rows="4" v-model="returnNote"></textarea>
      </div>
      <div class="upload">
        <h3>上传凭证</h3>
        <div>
          <div class="image-list">
            <div style="text-align:center" ref="divGenres" class="list-default-img" v-show="isPhoto" @click.stop="addPic">
              <img src="./../../assets/common/images/camera.png" />
              <br>
              <span>请选择或者拍照上传照片</span>
              <input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" @change="onFileChange" style="display: none;">
            </div>
            <ul class="list-ul" v-show="!isPhoto">
              <li class="list-li " v-for="(iu, index) in imgUrls">
                <a class="list-link" @click='previewImage(iu)'>
                  <img :src="iu">
                </a>
                <span class="list-img-close" @click='delImage(index)'></span>
              </li>
              <li class="list-li" v-if="isAdd">
                <span class="add-img" @click.stop="addPic"> </span>
              </li>
            </ul>
          </div>
          <!--<button @click="saveImage">上传</button>-->
        </div>
      </div>
      <div class="submit">
        <button @click="submit()">提交售后申请</button>
      </div>
      <awesome-picker ref="picker0" :data="picker0.data" :anchor="picker0.anchor" @confirm="handlePicker0Confirm" colorConfirm="#F60">
      </awesome-picker>
      <awesome-picker ref="picker1" :data="picker1.data" :anchor="picker1.anchor" @confirm="handlePicker1Confirm" colorConfirm="#F60">
      </awesome-picker>
    </div>
  </div>
</template>
<script>
import {
  getReturnGoods,
  upload,
  applyReturnGoods,
  updateReturnGoods
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import lrz from 'lrz'
import { Toast } from 'mint-ui'
export default {
  data() {
    return {
      value0: '请选择',
      value1: '请选择',
      flag: false,
      returnNum: '',
      returnType: '',
      returnGoodsStatus: '',
      returnReason: '',
      returnPrice: 0,
      returnFreight: 0,
      returnNote: '',
      returnImg: '',
      picker0: {
        anchor: [],
        data: [['没有收到货品', '已经收到全部或部分']]
      },
      picker1: {
        anchor: [],
        data: [['仓库缺货', '未按约定时间发货', '不想买了/订单下错了', '不想买了，已与客服协商', '大小/尺寸不符', '无理由退货', '颜色/图案/款式不符', '破损/污渍/划痕', '其他']]
      },
      imgUrls: [],
      urlArr: [],
      isPhoto: true,
      isAdd: true,
      fileArr: []
    }
  },
  watch: {
    imgUrls: 'toggleAddPic'
  },
  components: {
  },
  created() {
    this.fetchData()
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        userId: this.userInfo.id,
        orderId: this.$route.query.orderId,
        orderGoodsId: this.$route.query.orderGoodsId,
        returnId: this.$route.query.returnId
      }
      getReturnGoods(formData).then(res => {
        this.returnPrice = res.data.returnGoods.orderDiscountTotalMoney
        this.returnFreight = res.data.returnGoods.orderFreight
        let num = ''
        res.data.returnGoods.orderGoodsList.forEach(item => {
          num += item.goodsNum + ','
        })
        this.returnNum = num
        if (formData.returnId) {
          if (res.data.returnDetails.returnGoodsStatus === 1) {
            this.value0 = '没有收到货品'
          } else {
            this.value0 = '已经收到全部或部分'
          }
          this.value1 = res.data.returnDetails.returnReason
          this.returnType = res.data.returnDetails.returnType
          this.returnGoodsStatus = res.data.returnDetails.returnGoodsStatus
          this.returnReason = encodeURI(res.data.returnDetails.returnReason)
          this.returnNote = res.data.returnDetails.returnNote
          const img = []
          res.data.returnDetails.returnImgList.forEach(item => {
            img.push(item.returnImg)
          })
          this.imgUrls = img
          this.returnImg = this.imgUrls.join(',')
        }
      })
    },
    show0() {
      this.$refs.picker0.show()
    },
    show1() {
      this.$refs.picker1.show()
    },
    handlePicker0Confirm(v) {
      this.picker0.anchor = v
      this.value0 = v[0].value
      this.returnType = v[0].index + 1
      this.returnGoodsStatus = v[0].index + 1
    },
    handlePicker1Confirm(v) {
      this.picker1.anchor = v
      this.value1 = v[0].value
      this.returnReason = encodeURI(v[0].value)
    },
    toggleAddPic: function() {
      const vm = this
      if (vm.imgUrls.length >= 1) {
        vm.isPhoto = false
        if (vm.imgUrls.length >= 5) {
          vm.isAdd = false
        } else {
          vm.isAdd = true
        }
      } else {
        vm.isPhoto = true
      }
    },
    addPic: function(e) {
      const els = this.$refs.divGenres.querySelectorAll('input[type=file]')
      els[0].click()
      return false
    },
    onFileChange: function(e) {
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) return
      this.createImage(files, e)
    },
    createImage: function(file, e) {
      const vm = this
      lrz(file[0], {
        width: 480
      }).then(function(rst) {
        vm.imgUrls.push(rst.base64)
        vm.fileArr.push(rst.origin)
        return rst
      }).always(function() {
        // 清空文件上传控件的值
        e.target.value = null
      })
    },
    delImage: function(index) {
      const vm = this
      vm.imgUrls.splice(index, 1)
    },
    previewImage: function(url) {
      const vm = this
      vm.isPreview = true
      vm.previewImg = url
    },
    submit() {
      const formData = new FormData()
      for (var i = 0; i < this.fileArr.length; i++) {
        formData.append('file', this.fileArr[i])
      }
      const param = { 'type': 'after' }
      if (this.fileArr.length > 0) {
        upload(formData, param).then(res => {
          this.returnImg = res.data.url + ',' + this.returnImg
          if (this.$route.query.returnId) {
            console.log(this.returnImg)
            updateReturnGoods({ 'userId': this.userInfo.id, 'returnId': this.$route.query.returnId, 'orderId': this.$route.query.orderId, 'returnType': this.returnType, 'orderGoodsId': this.$route.query.orderGoodsId, 'returnNum': this.returnNum, 'returnGoodsStatus': this.returnGoodsStatus, 'returnReason': this.returnReason, 'returnPrice': this.returnPrice, 'returnFreight': this.returnFreight, 'returnNote': encodeURI(this.returnNote), 'returnImg': this.returnImg }).then(res => {
              this.$router.replace({
                name: 'orderList'
              })
            }).catch(err => {
              if (err.info === 'returnGoodsStatus is null' || err.info === 'returnNote is null' || err.info === 'returnReason is null') {
                Toast('请填写完整信息')
              } else {
                Toast(err.info)
              }
            })
          } else {
            applyReturnGoods({ 'userId': this.userInfo.id, 'orderId': this.$route.query.orderId, 'returnType': this.returnType, 'orderGoodsId': this.$route.query.orderGoodsId, 'returnNum': this.returnNum, 'returnGoodsStatus': this.returnGoodsStatus, 'returnReason': this.returnReason, 'returnPrice': this.returnPrice, 'returnFreight': this.returnFreight, 'returnNote': encodeURI(this.returnNote), 'returnImg': this.returnImg }).then(res => {
              this.$router.replace({
                name: 'orderList'
              })
            }).catch(err => {
              if (err.info === 'returnGoodsStatus is null' || err.info === 'returnNote is null' || err.info === 'returnReason is null') {
                Toast('请填写完整信息')
              } else {
                Toast(err.info)
              }
            })
          }
        }).catch(err => {
          Toast(err.info)
        })
      } else {
        if (this.$route.query.returnId) {
          updateReturnGoods({ 'userId': this.userInfo.id, 'returnId': this.$route.query.returnId, 'orderId': this.$route.query.orderId, 'returnType': this.returnType, 'orderGoodsId': this.$route.query.orderGoodsId, 'returnNum': this.returnNum, 'returnGoodsStatus': this.returnGoodsStatus, 'returnReason': this.returnReason, 'returnPrice': this.returnPrice, 'returnFreight': this.returnFreight, 'returnNote': encodeURI(this.returnNote), 'returnImg': this.returnImg }).then(res => {
            this.$router.replace({
              name: 'orderList'
            })
          }).catch(err => {
            if (err.info === 'returnGoodsStatus is null' || err.info === 'returnNote is null' || err.info === 'returnReason is null') {
              Toast('请填写完整信息')
            } else {
              Toast(err.info)
            }
          })
        } else {
          applyReturnGoods({ 'userId': this.userInfo.id, 'orderId': this.$route.query.orderId, 'returnType': this.returnType, 'orderGoodsId': this.$route.query.orderGoodsId, 'returnNum': this.returnNum, 'returnGoodsStatus': this.returnGoodsStatus, 'returnReason': this.returnReason, 'returnPrice': this.returnPrice, 'returnFreight': this.returnFreight, 'returnNote': encodeURI(this.returnNote), 'returnImg': this.returnImg }).then(res => {
            this.$router.replace({
              name: 'orderList'
            })
          }).catch(err => {
            if (err.info === 'returnGoodsStatus is null' || err.info === 'returnNote is null' || err.info === 'returnReason is null') {
              Toast('请填写完整信息')
            } else {
              Toast(err.info)
            }
          })
        }
      }
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.fillRefundInfo {
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 45px;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #ECECEC;
    z-index: 2!important;
  }
  .submit {
    button {
      height: 45px;
      width: 100%;
      font-size: 14px;
      line-height: 45px;
      background-color: #F60;
      color: #FFF;
      text-align: center;
      position: fixed;
      bottom: 0;
    }
  }
  .refund-info {
    padding-left: 15px;
    background-color: #fff;
    p {
      height: 50px;
      line-height: 50px;
      padding-right: 15px;
      position: relative;
      border-bottom: 1px solid #D9E0E5;
      .right {
        float: right;
        input {
          margin-right: 20px;
          text-align: right;
        }
        .more-right::after {
          border: solid 2px #c8c8cd;
          border-bottom-width: 0;
          border-left-width: 0;
          content: " ";
          top: 50%;
          right: 20px;
          position: absolute;
          width: 5px;
          height: 5px;
          -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
        }
      }
      .bgc {
        background-color: #F8F8F8;
        width: 80%;
        height: 35px;
        line-height: 35px;
        text-align: right;
        margin-top: 7.5px;
        padding-right: 10px;
      }
    }
    p:nth-last-child(1) {
      border-bottom: none;
    }
  }
  .explain {
    height: 100px;
    background-color: #fff;
    padding: 15px;
    margin: 10px 0;
    textarea {
      resize: none;
      width: 100%;
      height: 100%;
    }
  }
  .upload {
    // height: 150px;
    overflow: hidden;
    background-color: #fff;
    padding: 15px;
  }
  .list-ul {
    list-style: none;
    /* 去掉ul前面的符号 */
    margin: 0px;
    /* 与外界元素的距离为0 */
    padding: 0px;
    /* 与内部元素的距离为0 */
    width: auto;
    /* 宽度根据元素内容调整 */
    overflow: hidden;
  }
  /* 所有class为menu的div中的ul中的li样式 */
  .list-li {
    float: left;
    margin-right: 15px;
    margin-top: 15px;
    /* 向左漂移，将竖排变为横排 */
    // padding: 8px;
    overflow: hidden;
    /* 与内部元素的距离为0 */
    display: inline-block;
    position: relative;
    text-align: center;
  }
  .list-link {
    overflow: hidden;
    height: 100px;
    width: 100px;
    display: table-cell;
    text-align: center;
  }
  .list-link img {
    height: 100px;
  }
  /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
  .list-link a:visited {
    background-color: #465c71;
    /* 背景色 */
    border: 1px #4e667d solid;
    /* 边框 */
    color: #dde4ec;
    /* 文字颜色 */
    display: flex;
    /* 此元素将显示为块级元素，此元素前后会带有换行符 */
    line-height: 1.35em;
    /* 行高 */
    padding: 4px 20px;
    /* 内部填充的距离 */
    text-decoration: none;
    /* 不显示超链接下划线 */
    white-space: nowrap;
    /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
    overflow: hidden;
  }
  /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
  .list-link a:hover {
    background-color: #bfcbd6;
    /* 背景色 */
    color: #465c71;
    /* 文字颜色 */
    text-decoration: none;
    /* 不显示超链接下划线 */
  }
  /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
  .list-link a:active {
    background-color: #465c71;
    /* 背景色 */
    color: #cfdbe6;
    /* 文字颜色 */
    text-decoration: none;
    /* 不显示超链接下划线 */
  }

  .list-img-close {
    background: #ffffff url('./../../assets/common/images/delete.svg') no-repeat right top;
    border-color: #ff4a00;
    background-position: center;
    background-size: 20px 20px;
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0px;
    margin-left: 0px;
    padding: 8px;
    z-index: 10;
    border-radius: 5px;
    text-align: center;
  }

  .add-img {
    display: block;
    background-image: url('./../../assets/common/images/add.svg');
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    background-position: center;
    background-size: 100px 100px;
  }
}
</style>
